<template>
  <div>
    <div
      class="page"
      v-for="(item, index) in Arr"
      :key="index"
      v-show="!Arr.length == 0"
    >
      <div class="l">
        <div>
          <div v-show="item.type == 1">
            <img src="../assets/消息中心/系统消息.png" width="50" alt="" />
            <img
              v-show="item.isReader == 1"
              src="../assets/消息中心/红点.png"
              width="12"
              alt=""
            />
          </div>
          <div v-show="item.type == 2">
            <img src="../assets/消息中心/个人信息.png" width="50" alt="" />
            <img
              v-show="item.isReader == 1"
              src="../assets/消息中心/红点.png"
              width="12"
              alt=""
            />
          </div>
        </div>
        <div>
          <p>
            {{ item.title }}
            <img
              v-show="item.top == 1"
              src="../assets/消息中心/置顶.png"
              width="10"
              alt=""
            />
          </p>
          <p>发布人：{{ item.sourceName }}</p>
        </div>
      </div>
      <div class="r" @click="xiangqing(item.id,item.type)">
        {{ item.createTime }}
        <img src="../assets/Shipment/jiantou.png" width="8" alt="" />
      </div>
    </div>
    <div class="wu" v-show="Arr.length == 0">
      <img src="../assets/Shipment/暂无消息.png" alt="" />
      <p>暂无消息</p>
    </div>
  </div>
</template>

<script>
import { Updates } from "../request/api";
export default {
  data() {
    return {};
  },
  props: ["Arr","active"],   
 
  methods: {
    xiangqing(id) {
      Updates({ id: id }).then((res) => {
        if (res.errCode == 0) {
          this.$router.push({
            path: "/messageXQ",
            query: {
              id: id,
              active:this.active
            },
          });
        }
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.page {
  width: 100%;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  .l {
    display: flex;
    align-items: center;
    img {
      margin-right: 10px;
    }
    div:nth-of-type(1) {
      position: relative;
      img:nth-of-type(2) {
        position: absolute;
        top: 0;
        right: 0;
      }
    }
    p:nth-of-type(2) {
      color: #999;
      margin-top: 5px;
    }
  }
  .r {
    color: #aaaaaa;
    display: flex;
    align-items: center;
    img {
      margin-left: 10px;
    }
  }
}
.wu {
  width: 100%;
  height: 70vh;
  text-align: center;
  box-sizing: border-box;
  padding-top: 180px;

  p {
    text-align: center;
    color: #ccc;
  }
}
</style>